<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="../reset.css">
</head>

<body>
    <div class="box">
        <div class="header">
            <p>便签</p>
            <input class="ipt" type="text">
            <input class="iipt" type="button" value="搜索">
            <img @click="sous" src="./1.png" alt="">
        </div>
        <div class="tianj" @click="qieh">
            <p>+</p>
        </div>
        <div class="center">
            <!-- <div class="center1">
                <h1></h1>
                <p></p>
            </div> -->
        </div>
    </div>


    <div class="box2">
        <div class="header2">
            <div class="header_left">
                <img @click="fanh" class="baoc" src="./2.png" alt="">
            </div>
            <div class="header_right">
                <img src="./3.png" alt="">
                <img src="./4.png" alt="">
                <img src="./5.png" alt="">
            </div>
        </div>
        <div class="wenb">
            <input class="ipt1" type="text" placeholder="请输入标签名">
            <input class="ipt2" type="text" name="" id="">
        </div>
        <input type="button" value="修改完成" class="qdbc">
    </div>



    <script src="../js/template-web.js"></script>
    <script type="text/html" id="temp">
        {{each xxx v i}}
        <div class="center1" @click="shanxiu">
            <h1 class='h11'>{{v.name}}</h1>
            <p class='p11'>{{v.wenzi}}</p>
            <button class="del">删除</button>
            <button class="xiug">修改</button>
        </div>
        {{/each}}
  </script>

    <script src="../js/index.js"></script>
    <script src="../js/vue-2.5.16.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        var a = false;
        var vue1 = new Vue({
            el: ".box",

            methods: {
                qieh: function () {
                    $(".box").hide();
                    $(".box2").show();
                },
                sous: function () {
                    if (!a) {
                        $('.ipt').show();
                        $('.iipt').show();
                    } else {
                        $(".ipt").hide();
                        $('.iipt').hide();
                    }
                    a = !a;
                },
            }
        });
        var vue2 = new Vue({
            el: ".box2",
            methods: {
                fanh: function () {
                    $(".box2").hide();
                    $(".box").show();
                }
            }
        });


        var getAll = () => {
            var all = localStorage.getItem('cunchu');
            all = JSON.parse(all || '[]');
            var str = template('temp', {
                xxx: all
            })
            $(".center").html(str);
        }
        getAll();



        $(".baoc").on('click', function () {
            var obj = {
                name: $(".ipt1").val(),
                wenzi: $(".ipt2").val(),
            }
            var all = localStorage.getItem('cunchu');
            if (all) {
                all = JSON.parse(all);
                all.push(obj);
                localStorage.setItem('cunchu', JSON.stringify(all));
            } else {
                localStorage.setItem('cunchu', JSON.stringify([obj]));
            }
            getAll();
        });

        $('.center1').click(function () {
            $('.box').addClass('on').siblings('.box2').show();
        });



        $('.iipt').click(function () {
            var all = JSON.parse(localStorage.getItem('cunchu') || "[]");
            var val = $('.ipt').val();
            var arr = all.filter(v => {
                if (v.name.indexOf(val) > -1) return v;
                if (v.wenzi.indexOf(val) > -1) return v;
            });
            var str = template('temp', {
                xxx: arr
            });
            $('.center').html(str);
        });
        getAll();


        $('.box').on('click', '.del', function () {
                var tt = $(this).parent();
                console.log(tt);
                var all = JSON.parse(localStorage.getItem('cunchu'));
                all.splice(tt.index(), 1);
                localStorage.setItem('cunchu', JSON.stringify(all));
                tt.remove();
            })
            .on('click', '.xiug', function () {
                var tt = $(this).parent();
                var all = JSON.parse(localStorage.getItem('cunchu'));
                console.log(all);
                var tts = all[tt.index()];
                tts.index = tt.index();
                sessionStorage.setItem('tt-data', JSON.stringify(tts));
                $('.box').hide();
                $('.box2').show();
                console.log(tts);
                $('.ipt1').val(tts.name);
                $('.ipt2').val(tts.wenzi);
            });



            $('.qdbc').on('click' , function(){
                var all = JSON.parse(localStorage.getItem('cunchu'));
                var tts = JSON.parse(sessionStorage.getItem('tt-data'));
                var obj = {
                    name : $('.ipt1').val(),
                    wenzi : $('.ipt2').val()
                }
                all.splice(tts.index ,1 ,obj);
                localStorage.setItem('cunchu' , JSON.stringify(all));
                $('.box2').hide();
                $('.box').show();
                getAll();
            });
    </script>
</body>

</html>